<template>
  <div class="next-box">
    <i
      @click="nextModel(1)"
      class="doorIcon doorIcon-next"
      v-if="store.previewModuleIndex < store.templateMOdeList.length - 1"
      >&#xe639;</i
    >
    <i
      @click="nextModel(2)"
      class="doorIcon doorIcon-blank"
      v-if="store.previewModuleIndex > 0 && store.templateMOdeList.length > 0"
      >&#xe638;</i
    >
  </div>
</template>   
  
<script setup lang="ts">
import { psthOutline } from '@/hooks/menuHooks';
import Auxiliary from '@/freeComponents/Auxiliary/index.vue';
import {
  isAnyElementOutOfParent,
  isElementOutOfParent,
  getParentLeftList,
  addParentWidths,
  getParentLeftItem,
} from '@/utils/minxin';
import { DraggableContainer } from 'vue3-draggable-resizable';
import { getDraggableNumber, getRemConversion } from '@/utils/getRemComputed';
import Level3outline from '../Level3outline/Level3outline.vue';
import draggableList from '../draggableComponents/draggableList.vue';
import { ref, nextTick, watch, computed } from 'vue';
import { useProjectStore } from '@/store';
import Outline from './Outline/Index.vue';
import { childItemMenuShow } from '@/hooks/menuHooks';
import { useRoute } from 'vue-router';
import FlotMenu from '@/components/flotMenu/OutlineMenu.vue';

const route = useRoute();
const store = useProjectStore();

const nextModel = (type: number) => {
  if (type === 1) {
    store.SetpreviewModeShow()
    store.previewModuleIndex = store.previewModuleIndex + 1;
  } else {
    store.SetpreviewModeShow()
    store.previewModuleIndex = store.previewModuleIndex - 1;
  }
  let id = store.templateMOdeList[store.previewModuleIndex].id;
 
  setTimeout(() => { 
    psthOutline('Level1outline' + id);
  }, 200);
};
</script>  

<style scoped lang="less">
.next-box {
  position: relative;
  z-index: 20;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  i {
    padding: 100px;
    font-size: 32px;
    color: #fff;
  }
}
</style>